<template>
  <view>
    <view
        v-if="show"
        @click="close"
        class="back"></view>
    <u-popup
        :z-index="999999"
        mode="bottom"
        bgColor="rgba(0,0,0,0)"
        overlay-opacity="0"
        :show="show" @close="close" @open="open">
      <view>


        <view
            class="box">
          <view style="height: 20rpx"></view>
          <view class="title">
            选择技能等级
          </view>
          <view style="height: 20rpx"></view>
          <scroll-view
              style="max-height: 500rpx"
              scroll-y>
            <view
                v-for="item in list"
                :style="{
                  fontWeight: item.id === selected ? 'bold' : 'normal'
                }"
                @click="change(item.id)"
                class="in-box">
              {{ item.name }}
            </view>
          </scroll-view>

          <time-popup
              @change="change2"
              ref="birthdayPopup"
          ></time-popup>

        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>
import BirthdayPopup from "@/pages/updateInfo/components/birthday-popup.vue";
import TimePopup from "@/pages/updateInfo/components/time-popup.vue";

export default {
  components: {TimePopup, BirthdayPopup},
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {
          birthday: 0,
          genderCode: "male"
        };
      }
    }
  },
  data() {
    return {
      show: false,
      list: [],
      selected: "",
      time: 0,
      levelIndex: 0,
      isAdd: false

    };
  },
  mounted() {
    // 获取所有工作系列
    this.list = this.$talent.get.getSkillLevelList();
  },
  methods: {
    open(index) {
      console.log(index);
      if (index===0||index) {
        this.isAdd = false;
        this.levelIndex = index;
        console.log(this.levelIndex, this.userInfo.talentSkillLevelExperiencesOfUserAccount[this.levelIndex], "---");
        this.selected = this.userInfo.talentSkillLevelExperiencesOfUserAccount[this.levelIndex].skillLevelId;
        this.show = true;
        this.$emit("open");
      }
    },
    openOfAdd() {
      this.isAdd = true;
      this.show = true;
      this.$emit("open");
    },
    close() {
      this.show = false;
      this.$emit("close");
    },
    change(id) {
      this.selected = id;
      this.$refs.birthdayPopup.open();
      // this.$emit("change", code);
      // this.close();
    },
    change2(time) {
      console.log(this.selected, this.time, this.levelIndex, this.isAdd, "----");
      this.time = time;
      this.$emit("change", this.selected, this.time, this.levelIndex, this.isAdd);
      console.log(this.selected, this.time, this.levelIndex, this.isAdd, "----");
      this.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.back {
  position: fixed;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box {
  border-radius: 20rpx 20rpx 0 0;
  position: relative;
  background-color: #FFFFFF;
  padding: 0 20rpx 20rpx 20rpx;
  text-align: center;

  .in-box {
    position: relative;
    padding: 20rpx 0;
  }

  .in-box:active {
    opacity: .5;
  }
}

.text {
  position: absolute;
  display: inline-block;
  right: 0;
  font-size: 22rpx;
}
</style>
